import Taro ,{ Component } from '@tarojs/taro'
import { View , Image} from '@tarojs/components'

import { AtTabs, AtTabsPane } from 'taro-ui'

import './convenienceList.scss'

import ConvenienceItem from '../../component/ConvenienceItem/convenienceItem.js'

import postImage from '../../image/post.png'

import DataManager from '../../utils/DataManager.js'
import ListEmptyView from '../../component/LiseEmptyView/listEmptyView.js'
import emptyIcon from '../../image/ic_empty.png'

import {base_url} from "../../network/config";
import BasePage from "../basePage";
import {COMMON_CONST} from "../../utils/const";

let mPageNum = 1;
let housePage = 1;
let shopPage = 1;
let jobPage = 1;
let salePage = 1;
let askPage = 1;
let lifePage = 1;
let secondPage = 1;
let otherPager = 1;

export default class convenienceList extends BasePage {
  config = {
    navigationBarTitleText: ''
  }

  constructor() {
    super(...arguments)
    this.state = {
      list: [],
      bannerHeight:0,
      tabCurrent:0,
      houseList:[],
      shopList:[],
      jobList:[],
      saleList:[],
      askList:[],
      lifeList:[],
      secondList:[],
      otherList:[],
    }
  }

  componentWillMount(){
    this.tabList = [{title: '全部' , code:0} , {title: '房屋租赁' , code:13001} , {title: '旺铺租售' ,code:13002} ,
      {title: '本地招聘' ,code:13003}, {title: '优惠促销',code:13004}, {title: '咨询打听',code:13005},
      {title: '生活服务' , code:13006}, {title: '二手市场',code:13007}, {title: '其他',code:13008}];
  }

  componentDidShow(){
    Taro.eventCenter.trigger('tabIndex' ,1);
  }

  componentDidMount () {
    Taro.setNavigationBarTitle({
      title: DataManager.getAddressName() + '便民信息'
    })

    Taro.eventCenter.on('shopInfoPost',() => {
      this.setState({
        tabCurrent : 0
      })
      mPageNum = 1;
      this.loadConvenienceList(mPageNum , 0)
    })

    this.loadConvenienceList(1 , 0)

  }

  onPullDownRefresh(){
    switch (this.state.tabCurrent){
      case 0:
        mPageNum = 1;
        break;
      case 1:
        housePage = 1;
        break;
      case 2:
        shopPage = 1;
        break;
      case 3:
        jobPage = 1;
        break;
      case 4:
        salePage = 1;
        break;
      case 5:
        askPage = 1;
        break;
      case 6:
        lifePage = 1;
        break;
      case 7:
        secondPage = 1;
        break;
      case 8:
        otherPager = 1;
        break;

    }
    let code = this.tabList[this.state.tabCurrent].code;
    this.loadConvenienceList(1 ,code);
  }

  onReachBottom(){
    let page = 1;
    switch (this.state.tabCurrent){
      case 0:
        page = mPageNum ++;
        break;
      case 1:
        page = housePage ++ ;
        break;
      case 2:
        page = shopPage ++;
        break;
      case 3:
        page = jobPage ++ ;
        break;
      case 4:
        page = salePage ++ ;
        break;
      case 5:
        page = askPage ++ ;
        break;
      case 6:
        page = lifePage ++;
        break;
      case 7:
        page = secondPage ++;
        break;
      case 8:
        page = otherPager ++ ;
        break;
    }
    let code = this.tabList[this.state.tabCurrent].code;
    this.loadConvenienceList(page , code)
  }

  loadConvenienceList(pageNo , code){
    console.log('loadpage------------' + pageNo + '   ' + code)

    let _this = this;
    let url = base_url + 'stateless/category/news/categoryNewsList'

    Taro.showLoading({
      mask:true,
      title:'拼命加载中...'
    })

    let params = {
      token:DataManager.getToken(),
      platform:'android_c',
      weixinId:DataManager.getWeiXinId(),
      loginChannel:'c',
      appId:'KC876D98B30UA40CJSNHI689FB33SDW',
      digest : 'dda484557c12febe48139d8f44051c13',
      pageNo: pageNo,
      pageSize: COMMON_CONST.LIST_SIZE
    }

    if (code && code != 0){
      let codeObj = {'code' : code};
      Object.assign(params , codeObj);
    }

    Taro.request({
      url:url,
      data: params,
      method: 'GET',
      success(res) {
        if (!res.data || !res.data.data || !res.data.data.list || res.data.data.list.length < 1) {
          if (pageNo > 1) {
            switch (_this.state.tabCurrent) {
              case 0:
                mPageNum--;
                break;
              case 1:
                housePage--;
                break;
              case 2:
                shopPage--;
                break;
              case 3:
                jobPage--;
                break;
              case 4:
                salePage--;
                break;
              case 5:
                askPage--;
                break;
              case 6:
                lifePage--
                break;
              case 7:
                secondPage--;
                break;
              case 8:
                otherPager--;
                break;
            }
          }
        }

        if (!res || !res.data || !res.data.data || !res.data.data.list) {
          return
        }

        let shops = [];
        if (pageNo == 1) {
          shops = res.data.data.list;
        } else {
          switch (_this.state.tabCurrent) {
            case 0:
              shops = _this.state.list.concat(res.data.data.list)
              break;
            case 1:
              shops = _this.state.houseList.concat(res.data.data.list)
              break;
            case 2:
              shops = _this.state.shopList.concat(res.data.data.list)
              break;
            case 3:
              shops = _this.state.jobList.concat(res.data.data.list)
              break;
            case 4:
              shops = _this.state.saleList.concat(res.data.data.list)
              break;
            case 5:
              shops = _this.state.askList.concat(res.data.data.list)
              break;
            case 6:
              shops = _this.state.lifeList.concat(res.data.data.list)
              break;
            case 7:
              shops = _this.state.secondList.concat(res.data.data.list)
              break;
            case 8:
              shops = _this.state.otherList.concat(res.data.data.list)
              break;
          }
        }
        switch (_this.state.tabCurrent) {
          case 0:
            _this.setState({
              list: shops
            })
            break;
          case 1:
            _this.setState({
              houseList: shops
            })
            break;
          case 2:
            _this.setState({
              shopList: shops
            })
            break;
          case 3:
            _this.setState({
              jobList: shops
            })
            break;
          case 4:
            _this.setState({
              saleList: shops
            })
            break;
          case 5:
            _this.setState({
              askList: shops
            })
            break;
          case 6:
            _this.setState({
              lifeList: shops
            })
            break;
          case 7:
            _this.setState({
              secondList: shops
            })
            break;
          case 8:
            _this.setState({
              otherList: shops
            })
            break;
        }
      } ,
      fail: function () {
        if (pageNo > 1){
          switch (_this.state.tabCurrent) {
            case 0:
              mPageNum--;
              break;
            case 1:
              housePage--;
              break;
            case 2:
              shopPage--;
              break;
            case 3:
              jobPage--;
              break;
            case 4:
              salePage--;
              break;
            case 5:
              askPage--;
              break;
            case 6:
              lifePage--
              break;
            case 7:
              secondPage--;
              break;
            case 8:
              otherPager--;
              break;
          }
        }
      },
      complete:function(){
        Taro.hideLoading();
        Taro.stopPullDownRefresh();
      }
    })
  }

  handlePostClick = () =>{
    Taro.navigateTo({
      url:`/pages/post/allPost`
    })
  }

  handleTabClick (pos) {
    let code = this.tabList[pos].code;
    switch (pos){
      case 0:
        if (this.state.list.length == 0){
          this.loadConvenienceList(mPageNum , code);
        }
        break;
      case 1:
        if (this.state.houseList.length == 0){
          this.loadConvenienceList(housePage , code);
        }
        break;
      case 2:
        if (this.state.shopList.length == 0){
          this.loadConvenienceList(shopPage , code);
        }
        break;
      case 3:
        if (this.state.jobList.length == 0){
          this.loadConvenienceList(jobPage , code);
        }
        break;
      case 4:
        if (this.state.saleList.length == 0){
          this.loadConvenienceList(salePage , code);
        }
        break;
      case 5:
        if (this.state.askList.length == 0){
          this.loadConvenienceList(askPage , code);
        }
        break;
      case 6:
        if (this.state.lifeList.length == 0){
          this.loadConvenienceList(lifePage , code);
        }
        break;
      case 7:
        if (this.state.secondList.length == 0){
          this.loadConvenienceList(secondPage , code);
        }
        break;
      case 8:
        if (this.state.otherList.length == 0){
          this.loadConvenienceList(otherPager , code);
        }
        break;
    }
    this.setState({
      tabCurrent: pos
    })
  }

  render() {
    return (
      <View className='shop-list-main-container'>
        <View className='shop-list-container'>
          <AtTabs
            current={this.state.tabCurrent}
            tabList={this.tabList}
            onClick={this.handleTabClick.bind(this)}
            swipeable
            scroll
            animated
          >
            <AtTabsPane current={this.state.tabCurrent} index={0}>
              {this.state.list.length > 0 ? this.state.list.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={1}>
              {this.state.houseList.length > 0 ? this.state.houseList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={2}>
              {this.state.shopList.length > 0 ? this.state.shopList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={3}>
              {this.state.jobList.length > 0 ? this.state.jobList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={4}>
              {this.state.saleList.length > 0 ? this.state.saleList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={5}>
              {this.state.askList.length > 0 ? this.state.askList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={6}>
              {this.state.lifeList.length > 0 ? this.state.lifeList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={7}>
              {this.state.secondList.length > 0 ? this.state.secondList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
            <AtTabsPane current={this.state.tabCurrent} index={8}>
              {this.state.otherList.length > 0 ? this.state.otherList.map(item => {
                  return (<ConvenienceItem className='shop-list-item' infoData={item}></ConvenienceItem>)
                })
                :
                <ListEmptyView emptyText='暂无数据' emptyImage={emptyIcon} />
              }
            </AtTabsPane>
          </AtTabs>
        </View>
        <View className='post-entry' >
          <Image  src={postImage} style='width:50px; height:50px;position:relative' onClick={this.handlePostClick.bind(this)} />
        </View>
      </View>
    )
  }

}
